<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>物业管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#"><h2>物业管理系统</h2></a>
    <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
    >
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto font-weight-bold">
            <li class="nav-item ">
                <a class="nav-link" href="${pageContext.request.contextPath}/user/" >主页</a>
            <li class="nav-item ">
                <a class="nav-link" href="#"
                >宿舍申请</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">申请进度</a>
            </li>

            <li class="nav-item active">
                <a class="nav-link" href="#" tabindex="-1">个人中心<span class="sr-only">(current)</span></a>
            </li>
        </ul>
        <div>
            <span class="text-danger">${user.name}</span>
            <a href="${pageContext.request.contextPath}/login"><button class="btn btn-outline-secondary">退出登录</button></a>
        </div>
    </div>
</nav>
<div class="d-flex justify-content-center">
    <div class="w-75 border shadow p-4">
        <div>
            <h3>个人中心</h3>
        </div>
        <div>
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" href="#personal" data-toggle="tab"
                    >资料管理</a
                    >
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#alterpwd" data-toggle="tab">修改密码</a>
                </li>
            </ul>
        </div>
        <br />
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="personal">
                <div class="form-group">
                    <label for="cid">员工ID</label>
                    <input
                            type="text"
                            class="form-control"
                            id="cid"
                            required
                            disabled
                    />
                </div>
                <form action="${pageContext.request.contextPath}/user/personal/update" method="POST">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input
                            type="text"
                            class="form-control"
                            id="name"
                            required
                            disabled
                    />
                </div>
                <div class="form-group">
                    <label for="gender">性别</label>
                    <select id="gender" class="form-control" disabled>
                        <option value=1 id="male" >男</option>
                        <option value=0 id="female" >女</option>
                        <option value=-1 id="no-gender" class="text-danger">未填写性别</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="number">身份证号</label>
                    <input
                            type="text"
                            class="form-control"
                            id="number"
                            required
                            disabled
                    />
                </div>
                    <div class="form-group">
                        <label for="phone">手机号码</label>
                        <input type="tel" class="form-control" id="phone" required />
                    </div>
                    <button type="submit" class="btn btn-success">更新</button>
                </form>
            </div>
            <div role="tabpanel" class="tab-pane" id="alterpwd">
                <form action="${pageContext.request.contextPath}/user/personal/alterpwd" method="POST">
                    <div class="form-group">
                        <label for="pwd">请输入原密码</label>
                        <input
                                type="password"
                                class="form-control"
                                id="pwd"
                                required
                        />
                        <small id="pwd_help" class="form-text text-danger"
                        ></small
                        >
                    </div>
                    <div class="form-group">
                        <label for="password">新密码</label>
                        <input
                                type="password"
                                class="form-control"
                                id="password"
                                required
                        />
                    </div>
                    <div class="form-group">
                        <label for="check_password">确认新密码</label>
                        <input
                                type="password"
                                class="form-control"
                                id="check_password"
                                required
                        />
                        <small id="check_password_help" class="form-text text-danger"
                        ></small
                        >
                    </div>
                    <button type="submit" class="btn btn-success">修改</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    let nameInput = document.getElementById("name");
    let numberInput = document.getElementById("number");
    let cidInput = document.getElementById("cid");
    let phoneInput = document.getElementById("phone");
    let genderSelect=document.getElementById("gender");
    nameInput.value = "${user.name}";
    numberInput.value =  "${user.number}";
    cidInput.value =  "${user.cid}";
    phoneInput.value =  "${user.phone}";
    var genderIndex=${user.gender};
    //如果为刚注册未提交性别和姓名，解除不可选状态
    if (nameInput.value.length<=0){
        nameInput.disabled=false;
    }
    // 判断性别
    if (genderIndex==1){
        document.getElementById("male").selected=true;
    }
    else if (genderIndex==0){
        document.getElementById("female").selected=true;
    }
    else{
        document.getElementById("no-gender").selected=true;
        genderSelect.disabled=false;
    }
    let password=document.getElementById("password");
    let check_password=document.getElementById("check_password");
    let check_password_help=document.getElementById("check_password_help");
    // 检验旧密码是否正确
    function checkpwd(){
        var password=${user.password};
        if (passwordInput.value==password){
            $('pwd_help').html("密码正确！");
        }
        else $('pwd_help').html("");
    }
    //检验两次新密码是否相同
    $('#check_password').blur(
        function (){
            if (password.value==check_password.value){
                $("#check_password_help").html("");

            }else{
                $("#check_password_help").html("请确认两次密码输入是否相同");
            }
        }
    )
    $('#password').blur(
        function (){
            if (password.value==check_password.value){
                $("#check_password_help").html("");
            }else{
                $("#check_password_help").html("请确认两次密码输入是否相同");
            }
        }
    )
</script>
</body>
</html>
